import 'package:cbec_app/components/base/base_badges.dart';
import 'package:cbec_app/components/base/base_image.dart';
import 'package:cbec_app/components/base/base_interactive.dart';
import 'package:cbec_app/components/base/base_page.dart';
import 'package:cbec_app/components/common/common_style.dart';
import 'package:cbec_app/components/common/recommend.dart';
import 'package:cbec_app/components/common/scrollable_Icons_card.dart';
import 'package:cbec_app/pages/my/controller/my_ctr.dart';
import 'package:cbec_app/routes/routes.dart';
import 'package:cbec_app/utils/AppData.dart';
import 'package:cbec_app/utils/Tools.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import '../../../components/base/icon_text_item.dart';

class MyPage extends GetView<MyController> {
  MyPage({Key? key}) : super(key: key);

  //标题文本样式
  final TextStyle _titleStyle = const TextStyle(fontSize: 15.0, color: Colors.white, fontWeight: FontWeight.w700);

  final TextStyle _titleBlackStyle = const TextStyle(fontSize: 15.0, color: Color.fromRGBO(51, 51, 51, 1), fontWeight: FontWeight.w500);

  List<Map<String, Object>> datas = [
    {'img': 'my_tg.png', 'title': '团购', 'onTap': () => Get.toNamed(Routes.myGroupBuy)},
    {'img': 'my_tg.png', 'title': '预售订单', 'onTap': () => Get.toNamed(Routes.presaleOrder)},
    {'img': 'my_tg.png', 'title': '砍价', 'onTap': () => Get.toNamed(Routes.bragainingOrder)},
    // {'img': 'my_kj.png', 'title': '砍价', 'onTap': () => Get.toNamed(Routes.bargainingPage)},
    {'img': 'my_sc.png', 'title': '收藏', 'onTap': () => Get.toNamed(Routes.collect)},
    {'img': 'my_zj.png', 'title': '足迹', 'onTap': () => Get.toNamed(Routes.footprint)},
    {'img': 'my_tg.png', 'title': '我的地址', 'onTap': () => Get.toNamed(Routes.address)},
    // {'img': 'my_tg.png', 'title': '预售', 'onTap': () => Get.toNamed(Routes.preSales)},
    {'img': 'my_tg.png', 'title': '门店券', 'onTap': () => Get.toNamed(Routes.shopCard)},
    // {'img': 'my_tg.png', 'title': '充值缴费', 'onTap': () => Tools.showToast("暂无UI")},
    {'img': 'my_kf2.png', 'title': '客服', 'onTap': () => Get.toNamed(Routes.serviceSupportPage)},
    // {'img': 'my_tg.png', 'title': '我的推广', 'onTap': () => Get.toNamed(Routes.myPromotions)},
    // {'img': 'my_tg.png', 'title': '秒杀', 'onTap': () => Get.toNamed(Routes.killSalesPage)},
    // {'img': 'my_tg.png', 'title': '拼团', 'onTap': () => Get.toNamed(Routes.groupBuyingPage)},
    // {'img': 'my_tg.png', 'title': '特价商品', 'onTap': () => Get.toNamed(Routes.discountGoodsList)},
  ];

  @override
  Widget build(BuildContext context) {
    return GetBuilder<MyController>(builder: (controller) {
      return BasePage(
        isImmersionNav: true,
        refreshController: controller.baseRefreshCtr,
        enablePullDown: true,
        onPageRefresh: controller.onPageRefresh,
        bgColor: controller.data['backgroundColor'] != null && controller.data['backgroundColor'] != '' ? Tools.fromHex(controller.data['backgroundColor']) : Colors.transparent,
        bodyColor: controller.data['backgroundColor'] == null && controller.data['backgroundColor'] != null ? null : Colors.transparent,
        children: [
          //头部
          _header(),
          Container(
            color: Tools.fromHex("#F3F5F7"),
            child: Column(
              children: [
                //我的订单
                _myOrder(),
                //我的权益
                _myPower(),
                //团购客服砍价等
                if (datas.length > 10) ...[
                  ScrollableIconsCard(datas: datas, amount: 2),
                ] else ...[
                  Container(
                    margin: EdgeInsets.symmetric(vertical: 10.h),
                    padding: EdgeInsets.symmetric(vertical: 10.h),
                    width: MediaQuery.of(context).size.width - 20.w, // 总宽度
                    decoration: const BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.all(Radius.circular(8)),
                    ),
                    child: Wrap(
                      runSpacing: 20.0, // 垂直间距
                      alignment: WrapAlignment.start, // 对齐方式
                      children: [
                        for (var item in datas) // 动态生成图标和文本
                          InkWell(
                            onTap: item['onTap'] is Function ? item['onTap'] as VoidCallback : () {}, // 确保是一个有效的函数
                            child: SizedBox(
                              width: (MediaQuery.of(context).size.width - 20.w) / 5, // 总宽度减去 16 的外边距和 4 个间距(5 个单元之间的间距)，再除以 5
                              child: Column(
                                children: <Widget>[
                                  BaseImage(
                                    url: item['img'].toString(),
                                    height: 30,
                                    width: 30,
                                  ),
                                  const SizedBox(height: 5),
                                  Text(
                                    item['title'].toString(),
                                    style: const TextStyle(fontSize: 12),
                                  ),
                                ],
                              ),
                            ),
                          ),
                      ],
                    ),
                  ),
                ],
                Recommend(location: "MemberCenter"),
              ],
            ),
          ),
        ],
      );
    });
  }

  Widget _header() => SizedBox(
        child: Stack(
          children: [
            // 背景图片与 Column 高度一致
            Positioned.fill(
              child: BaseImage(
                url: 'my_head_bg2.png',
                fit: BoxFit.cover,
              ),
            ),
            SizedBox(
              height: 197,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  // 头像和右侧按键
                  Container(
                    width: double.infinity,
                    height: 56.h,
                    margin: EdgeInsets.fromLTRB(18.0.w, 18.0.w + kTextTabBarHeight, 10.0.w, 0.w),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        // 左边头像昵称
                        Row(
                          children: [
                            // 头像
                            GestureDetector(
                              onTap: () => {AppData.tokenValue == '' ? Get.toNamed(Routes.login) : Get.toNamed(Routes.setting)},
                              child: Container(
                                width: 56.h, // 外框的宽度，比图片略大
                                height: 56.h, // 外框的高度，比图片略大
                                decoration: const BoxDecoration(
                                  color: Colors.white, // 边框颜色
                                  shape: BoxShape.circle, // 确保是圆形
                                ),
                                padding: EdgeInsets.all(2.h), // 边框的厚度
                                child: ClipOval(
                                  child: BaseImage(
                                    url: AppData.isLogin ? AppData.avatar ?? "default_avatar.png" : "default_avatar.png",
                                    width: 56.h,
                                    height: 56.h,
                                  ),
                                ),
                              ),
                            ),
                            // 昵称和手机号

                            AppData.isLogin
                                ? InkWell(
                                    child: Container(
                                      padding: EdgeInsets.only(left: 10.0.w),
                                      alignment: Alignment.topLeft,
                                      height: 56,
                                      child: Column(
                                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                        crossAxisAlignment: CrossAxisAlignment.start,
                                        children: [
                                          Text(AppData.nickname!, style: _titleStyle),
                                          Text(
                                            AppData.phoneNumber!,
                                            style: const TextStyle(
                                              fontSize: 12,
                                              color: Colors.white,
                                              fontWeight: FontWeight.w300,
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                    onTap: () {
                                      AppData.isLogin ? Get.toNamed(Routes.setting) : Get.toNamed(Routes.login);
                                    },
                                  )
                                : InkWell(
                                    onTap: () {
                                      Get.toNamed(Routes.login);
                                    },
                                    child: Container(
                                      padding: const EdgeInsets.only(left: 8),
                                      child: Text('请登录', style: _titleStyle),
                                    ),
                                  ),
                          ],
                        ),
                        // 右侧按钮
                        Container(
                          margin: EdgeInsets.only(right: 10.w),
                          alignment: Alignment.topRight,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              SizedBox(
                                width: 5.w,
                              ),
                              InkWell(
                                child: const ImageIcon(
                                  AssetImage('assets/images/my_setting.png'),
                                  size: 20,
                                  color: Colors.white,
                                ),
                                onTap: () => {Get.toNamed(Routes.setting)},
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),

                  // 会员中心
                  BaseInteractive(
                    onClick: () => {Get.toNamed(Routes.myVip)},
                    childWidget: Container(
                      height: 38.w,
                      margin: EdgeInsets.only(left: 18.0.w, right: 18.0.w),
                      decoration: const BoxDecoration(
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(10.0),
                          topRight: Radius.circular(10.0),
                        ),
                        gradient: LinearGradient(
                          colors: [
                            Color.fromRGBO(242, 182, 112, 0.88),
                            Color.fromRGBO(247, 209, 110, 1),
                          ],
                        ),
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        mainAxisSize: MainAxisSize.max,
                        children: [
                          Row(
                            children: [
                              const SizedBox(width: 10),
                              Text(
                                "会员中心",
                                style: _titleStyle,
                              ),
                              SizedBox(
                                width: 10.w,
                              ),
                              Container(
                                margin: EdgeInsets.only(right: 10.w),
                                child: Row(
                                  children: [
                                    const Text(
                                      "积分",
                                      style: TextStyle(
                                        fontSize: 12.0,
                                        color: Colors.white,
                                        fontWeight: FontWeight.w500,
                                      ),
                                    ),
                                    Text(
                                      controller.vipInfo['points'] == null ? '0' : controller.vipInfo['points'].toString(),
                                      style: setTextStyle(15, FontWeight.w700, Colors.white),
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                          Container(
                            margin: const EdgeInsets.fromLTRB(0, 5, 10, 5),
                            child: ElevatedButton(
                              style: ElevatedButton.styleFrom(
                                foregroundColor: Colors.red,
                                backgroundColor: Colors.white,
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(20.0),
                                ),
                              ),
                              onPressed: () => {Get.toNamed(Routes.myVip)},
                              child: const Text(
                                '去看看',
                                style: TextStyle(color: Colors.red, fontSize: 10),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      );

  // 我的订单
  Widget _myOrder() => Container(
        width: double.infinity,
        margin: EdgeInsets.fromLTRB(8.0.w, 10.0.w, 8.0.w, 10.0.w),
        decoration: const BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(10.0)),
          color: Colors.white, //装饰了边框的话，颜色必须写在这里，写在外面会报错
        ),
        child: Column(
          children: [
            //上方标题及右侧全部按钮
            Container(
              margin: EdgeInsets.only(left: 10.w, top: 10.w),
              // color: Colors.red,
              height: 27,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    "我的订单",
                    style: _titleBlackStyle,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      InkWell(
                        onTap: () => {Get.toNamed(Routes.myOrder)},
                        child: const Text(
                          "全部",
                          style: TextStyle(fontSize: 13, fontWeight: FontWeight.w300, color: Color.fromRGBO(153, 153, 153, 1)),
                        ),
                      ),
                      SizedBox(
                        width: 5.w,
                      ),
                      InkWell(
                        onTap: () => {Get.toNamed(Routes.myOrder)},
                        child: const Icon(
                          Icons.arrow_forward_ios,
                          size: 15,
                          color: Color.fromRGBO(153, 153, 153, 1),
                        ),
                      ),
                      SizedBox(
                        width: 10.w,
                      )
                    ],
                  )
                ],
              ),
            ),
            //下方的按钮和文本列表
            Container(
              margin: EdgeInsets.only(top: 10.w, bottom: 10.w),
              padding: EdgeInsets.only(left: 10.w, right: 10.w),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  BaseBadges(
                      badgesStyle: BadgesStyle.hasBorder,
                      translateX: 0,
                      translateY: -5,
                      bgColor: Tools.fromHex("#F83F2D"),
                      txtColor: Colors.white,
                      num: controller.data['c0'] ?? 0,
                      child: IconTextItems(
                          images: 'assets/images/my_dfk.png',
                          width: 26,
                          height: 26,
                          texts: "待付款",
                          tap: () {
                            Get.toNamed(Routes.myOrder, arguments: {"type": 1});
                          })),
                  BaseBadges(
                      badgesStyle: BadgesStyle.hasBorder,
                      translateX: 0,
                      translateY: -5,
                      bgColor: Tools.fromHex("#F83F2D"),
                      txtColor: Colors.white,
                      num: controller.data['c1'] ?? 0,
                      child: IconTextItems(
                          images: 'assets/images/my_dfh.png',
                          width: 26,
                          height: 26,
                          texts: "待发货",
                          tap: () {
                            Get.toNamed(Routes.myOrder, arguments: {"type": 9});
                          })),
                  BaseBadges(
                    badgesStyle: BadgesStyle.hasBorder,
                    translateX: 0,
                    translateY: -5,
                    bgColor: Tools.fromHex("#F83F2D"),
                    txtColor: Colors.white,
                    num: controller.data['c2'] ?? 0,
                    child: IconTextItems(
                        images: 'assets/images/my_dsh.png',
                        width: 26,
                        height: 26,
                        texts: "待收货",
                        tap: () {
                          Get.toNamed(Routes.myOrder, arguments: {"type": 2});
                        }),
                  ),
                  BaseBadges(
                      badgesStyle: BadgesStyle.hasBorder,
                      translateX: 0,
                      translateY: -5,
                      bgColor: Tools.fromHex("#F83F2D"),
                      txtColor: Colors.white,
                      num: controller.data['c3'] ?? 0,
                      child: IconTextItems(
                          images: 'assets/images/my_dpj.png',
                          width: 26,
                          height: 26,
                          texts: "待评价",
                          tap: () {
                            Get.toNamed(Routes.commentOrderList);
                          })),
                  BaseBadges(
                      badgesStyle: BadgesStyle.hasBorder,
                      translateX: 8,
                      translateY: -5,
                      bgColor: Tools.fromHex("#F83F2D"),
                      txtColor: Colors.white,
                      num: controller.data['c4'] ?? 0,
                      child: IconTextItems(
                          images: 'assets/images/my_tksh.png',
                          width: 26,
                          height: 26,
                          texts: "退款/售后",
                          tap: () {
                            Get.toNamed(Routes.afterSalesOrderList);
                          })),
                ],
              ),
            )
          ],
        ),
      );

  /**
         * 我的权益
         */
  Widget _myPower() => Container(
        width: double.infinity,
        // height: 120.h,
        margin: EdgeInsets.fromLTRB(8.0.w, 0.w, 8.0.w, 0.0.w),
        decoration: const BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(10.0)),
          color: Colors.white, //装饰了边框的话，颜色必须写在这里，写在外面会报错
        ),
        child: Column(
          children: [
            //上方标题及右侧全部按钮
            Container(
              margin: EdgeInsets.fromLTRB(10.w, 10.w, 10.w, 5.w),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    "我的权益",
                    style: _titleBlackStyle,
                  ),
                ],
              ),
            ),
            //下方的按钮和文本列表
            Container(
              margin: EdgeInsets.only(top: 10.w, bottom: 10.w),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  SizedBox(
                    width: 1.w,
                  ),
                  TextTextItems(main_text: "${controller.data['redPacketNum'] ?? 0}个", texts: "红包", tap: () => {Get.toNamed(Routes.redPack)}),
                  TextTextItems(main_text: "${controller.data['couponNum'] ?? 0}张", texts: "优惠券", tap: () => {Get.toNamed(Routes.myCoupon)}),
                  TextTextItems(main_text: "￥${controller.data['bdPayCardBalance'] ?? 0}", texts: "预付卡", tap: () => {Get.toNamed(Routes.prepaymentCard)}),
                  TextTextItems(main_text: "￥${controller.data['amount'] ?? 0}", texts: "账户管理", tap: () => {Get.toNamed(Routes.accountManager)}),
                  SizedBox(
                    width: 1.w,
                  ),
                ],
              ),
            )
          ],
        ),
      );
}
